<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// Time range filters
const period = ref('month');
const timeRange = ref('6m');

// Stats data
const stats = ref([
  {
    title: '今日就诊人数',
    value: '46',
    change: '+8.5%',
    isPositive: true,
    icon: 'User',
    type: 'primary'
  },
  {
    title: '本月新增患者',
    value: '124',
    change: '+12.4%',
    isPositive: true,
    icon: 'Plus',
    type: 'success'
  },
  {
    title: '待随访患者',
    value: '28',
    change: '-5.2%',
    isPositive: false,
    icon: 'Bell',
    type: 'warning'
  },
  {
    title: '药品库存预警',
    value: '8',
    change: '+2',
    isPositive: false,
    icon: 'FirstAidKit',
    type: 'danger'
  }
]);

// Tasks data
const tasks = ref([
  {
    id: 1,
    title: '联系张先生确认复诊预约',
    dueDate: '今天',
    priority: 'high',
    assignee: '王医生'
  },
  {
    id: 2,
    title: '李女士术后随访电话',
    dueDate: '明天',
    priority: 'medium',
    assignee: '赵护士'
  },
  {
    id: 3,
    title: '审核周医生的手术申请',
    dueDate: '3天后',
    priority: 'medium',
    assignee: '科室主任'
  },
  {
    id: 4,
    title: '更新医院设备维护记录',
    dueDate: '4天后',
    priority: 'low',
    assignee: '设备科'
  }
]);

// Activities data
const activities = ref([
  {
    id: 1,
    type: 'call',
    title: '电话告知刘先生检查结果',
    time: '1小时前',
    user: '张护士',
    iconType: 'primary'
  },
  {
    id: 2,
    type: 'appointment',
    title: '新增预约：王女士 - 骨科门诊',
    time: '3小时前',
    user: '预约中心',
    iconType: 'success'
  },
  {
    id: 3,
    type: 'record',
    title: '患者病历已更新：陈先生',
    time: '昨天',
    user: '李医生',
    iconType: 'warning'
  },
  {
    id: 4,
    type: 'medicine',
    title: '药房已发药：处方#2846',
    time: '前天',
    user: '药房',
    iconType: 'info'
  }
]);

// Initialize charts
let patientChart = null;
let departmentChart = null;

onMounted(() => {
  // 初始化患者数量趋势图表
  const patientChartDom = document.getElementById('patient-chart');
  patientChart = echarts.init(patientChartDom);
  const patientOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['就诊人数', '预期']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '就诊人数',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330],
        smooth: true,
        lineStyle: {
          color: '#3498db'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(52, 152, 219, 0.5)' },
            { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
          ])
        }
      },
      {
        name: '预期',
        type: 'line',
        data: [800, 800, 900, 900, 1200, 1200],
        lineStyle: {
          type: 'dashed',
          color: '#e74c3c'
        }
      }
    ]
  };
  patientChart.setOption(patientOption);

  // 初始化科室分布图表
  const departmentChartDom = document.getElementById('department-chart');
  departmentChart = echarts.init(departmentChartDom);
  const departmentOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      top: 0
    },
    series: [
      {
        name: '科室分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '内科' },
          { value: 735, name: '外科' },
          { value: 580, name: '妇产科' },
          { value: 484, name: '儿科' },
          { value: 300, name: '眼科' },
          { value: 430, name: '口腔科' }
        ]
      }
    ]
  };
  departmentChart.setOption(departmentOption);

  // 监听窗口大小改变，调整图表尺寸
  window.addEventListener('resize', () => {
    patientChart.resize();
    departmentChart.resize();
  });
});
</script>

<template>
  <div>
    <h1 class="page-title">仪表盘</h1>
    
    <!-- 概览数据 -->
    <el-row :gutter="20" class="stat-overview">
      <el-col :span="6" v-for="(stat, index) in stats" :key="index">
        <div class="stat-card">
          <div :class="['stat-icon', stat.type]">
            <el-icon>
              <component :is="stat.icon"></component>
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <div :class="['stat-change', stat.isPositive ? 'positive' : 'negative']">
              <el-icon v-if="stat.isPositive"><ArrowUp /></el-icon>
              <el-icon v-else><ArrowDown /></el-icon>
              <span>{{ stat.change }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">科室就诊分布</h3>
            <div>
              <el-radio-group v-model="period" size="small">
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="quarter">本季度</el-radio-button>
                <el-radio-button label="year">本年度</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="card-body">
            <div id="department-chart" class="chart-container"></div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">患者就诊趋势</h3>
            <div>
              <el-select v-model="timeRange" placeholder="时间范围" size="small">
                <el-option label="最近6个月" value="6m"></el-option>
                <el-option label="最近12个月" value="12m"></el-option>
                <el-option label="今年" value="year"></el-option>
              </el-select>
            </div>
          </div>
          <div class="card-body">
            <div id="patient-chart" class="chart-container"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 待办任务和最近活动 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><List /></el-icon>
              待办任务
            </h3>
            <el-button type="primary" size="small" plain>
              <el-icon><Plus /></el-icon>
              添加任务
            </el-button>
          </div>
          <div class="card-body">
            <ul class="task-list">
              <li class="task-item" v-for="task in tasks" :key="task.id">
                <div class="task-checkbox">
                  <el-checkbox></el-checkbox>
                </div>
                <div class="task-content">
                  <div class="task-title">{{ task.title }}</div>
                  <div class="task-meta">
                    <span>截止: {{ task.dueDate }}</span>
                    <span style="margin: 0 8px">•</span>
                    <span>分配给: {{ task.assignee }}</span>
                  </div>
                </div>
                <div class="task-actions">
                  <el-dropdown>
                    <el-button size="small" type="plain">
                      <el-icon><MoreFilled /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>编辑</el-dropdown-item>
                        <el-dropdown-item>标记完成</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><Bell /></el-icon>
              最近活动
            </h3>
          </div>
          <div class="card-body">
            <ul class="activity-list">
              <li class="activity-item" v-for="activity in activities" :key="activity.id">
                <div :class="['activity-icon', activity.iconType]">
                  <el-icon v-if="activity.type === 'call'"><Phone /></el-icon>
                  <el-icon v-else-if="activity.type === 'appointment'"><Calendar /></el-icon>
                  <el-icon v-else-if="activity.type === 'record'"><Document /></el-icon>
                  <el-icon v-else><FirstAidKit /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-meta">
                    <span class="activity-time">{{ activity.time }}</span>
                    <span class="activity-user">{{ activity.user }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.page-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-overview {
  margin-bottom: 24px;
}

.chart-row {
  margin-bottom: 24px;
}

/* 使用主题变量和全局样式 */
</style> 